import React from 'react';
import {Root} from 'native-base';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';

import Home from '../components/Home';
import TeoDrawer from '../components/Drawer';
import Setting from '../components/Setting';

const Router = [
  {
    name: 'Home',
    component: Home,
  },
  {
    name: 'Setting',
    component: Setting,
  },
];

const Stack = createStackNavigator();
/*
const Drawer = createDrawerNavigator();

function TeoDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen
        name="Home"
        component={Home}
        initialRouteName="Home"
        drawerContentOptions={{
          activeTintColor: '#e91e63',
          itemStyle: {marginVertical: 30},
        }}
      />
      <Drawer.Screen
        name="SideBar"
        component={SideBar}
        initialRouteName="SideBar"
        drawerContentOptions={{
          activeTintColor: '#e91e63',
          itemStyle: {marginVertical: 30},
        }}
      />
    </Drawer.Navigator>
  );
}

 <Drawer.Navigator initialRouteName="Home">
     <Drawer.Screen name="Home" component={HomeScreen} />
     <Drawer.Screen name="Notifications" component={NotificationsScreen} />
 </Drawer.Navigator>
 */
export default () => (
  <Root>
    <NavigationContainer>
      <Stack.Navigator headerMode="none">
        <Stack.Screen
          name="TeoDrawer"
          component={TeoDrawer}
          initialRouteName="TeoDrawer"
        />
        {Router.map(route => (
          <Stack.Screen name={route.name} component={route.component} />
        ))}
      </Stack.Navigator>
    </NavigationContainer>
  </Root>
);
